<html lang="zh-CN">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="https://unpkg.zhimg.com/axios@1.0.0/dist/axios.min.js"></script>
  <head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" crossorigin="anonymous">
	<meta name="generator">
	<title>online disk</title>
	<style>
	* {
		margin:0;
		padding:0;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-font-smoothing:antialiased;
		-moz-font-smoothing:antialiased;
		-o-font-smoothing:antialiased;
		font-smoothing:antialiased;
		text-rendering:optimizeLegibility;
		font-family:Microsoft Yahei, "Open Sans", Helvetica, Arial, sans-serif;
	}

	body {
		font-family:Microsoft Yahei, "Open Sans", Helvetica, Arial, sans-serif;
		font-weight:300;
		font-size: 12px;
		line-height:30px;
		color:#777;
		background:#F6CECE;
	}

	.container {
		max-width:400px;
		width:100%;
		margin:0 auto;
		position:relative;
	}
	#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"], #contact button[type="button"] { font:400 12px/16px Microsoft Yahei,"Open Sans", Helvetica, Arial, sans-serif; }

	#contact {
		background:#F9F9F9;
		padding:25px;
		margin:5px 0;
	}

	#contact1 {
		background:#F9F9F9;
		padding:25px;
		margin:0px 0;
	}

	#div {
		background:#F9F9F9;
		padding:0px;
		margin:10px 0;
	}

	#contact h3 {
		color: #F96;
		display: block;
		font-size: 20px;
		font-weight: 400;
	}

	#contact h4 {
		margin:5px 0 15px;
		display:block;
		font-size:13px;
	}

	fieldset {
		border: medium none !important;
		margin: 0 0 10px;
		min-width: 100%;
		padding: 0;
		width: 100%;
	}

	#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
		width:100%;
		border:1px solid #CCC;
		background:#FFF;
		margin:0 0 5px;
		padding:10px;
	}

	#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
		-webkit-transition:border-color 0.3s ease-in-out;
		-moz-transition:border-color 0.3s ease-in-out;
		transition:border-color 0.3s ease-in-out;
		border:1px solid #AAA;
	}

	#contact button[type="submit"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#ffb3b3;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}

	#contact button[id="submit"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#ffff66;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}

	#contact button[id="delete"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#ff6666;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}
	#contact button[id="logout"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#D0FA58;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}
	#contact button[id="update"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#FAAC58;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}
	#contact button[id="back"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#00FF80;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}
	#contact button[id="move"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#58FAF4;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}
	#contact button[id="link"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#99ff33;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}

	#contact input[type="file"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#66ff33;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}

	#contact a {
		outline:0;
		/*border:1px solid #999;*/
		color:#642EFE;
		text-align: center;
		font-size: 1.6em;
		line-height:1.3em;
	}

	#contact button[type="submit"]:hover {
		background:#09C;
		-webkit-transition:background 0.3s ease-in-out;
		-moz-transition:background 0.3s ease-in-out;
		transition:background-color 0.3s ease-in-out;
	}

	#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

	#contact input:focus, #contact textarea:focus {
		outline:0;
		border:1px solid #999;
	}
	</style>
  </head>
  <body>
	<div class="container">
		<div id="contact">
			<h5>welcome to online disk,now your path is</h3>
			<ol class="breadcrumb" id="travel">	
			</ol>
			<div id="div">
				<h3 class="glyphicon glyphicon-cloud">当前目录文件</h3>
			</div>
			<h4 class="glyphicon glyphicon-log-in"> 选择操作文件名或目录名</h4>
			<input type="text" id="mkdir">
			<button type="button" id="submit" onclick="mkdir();">mkdir</button>
			<button type="button" id="delete" onclick="remove();">delete</button>
			<button type="button" id="update" onclick="update();">update</button>
			<button type="button" id="back" onclick="back();">back</button>
			<button type="button" id="move" onclick="move();">move</button>
			<button type="button" id="link" onclick="createLink();">link</button>
			<form action="/upload" method="post" enctype="multipart/form-data" id="sen">
					<h4 class="glyphicon glyphicon-floppy-disk" >点击按钮选择文件</h4><input type="file" class="file1" name="file1" />
				 <button type="submit" class="but1">upload</button>
			</form>
			<h5>if you want to edit online check <a href="/edit" class="edit">there</a></h5>
			<h5>the web link file,check<a href="/link" class="edit">there</a></h5>
			<button type="button" id="logout" onclick="logout();">out</button><br>
		</div>
	</div>
  </body>
  <script>
	function createTravel()
	{
		var url=window.location.pathname;
		var travel=document.getElementById("travel");
		var arr = url.split('/');
		var str="";
		for(var i=0;i<arr.length;i++)
		{
			str+=arr[i]+"/";
			var temp=document.createElement("lo");
			var path=document.createElement("a");
			if(i!=0)  	
				path.innerText=arr[i]+"/";
			else
				path.innerText="Home/";
			path.href=str;
			if(path.innerText!="/")
			{
				temp.appendChild(path);
				travel.appendChild(temp);
			}
		}
	}
  </script>
  <script>
	var url=window.location.pathname;
	var allUrl=window.location.href;
	if(url.search("login")!=-1)
		window.location.replace("/");
	var sen=document.getElementById("sen");
	createTravel();
	sen.action+=url;
	sen.action+="/";
	console.log(sen.action);
	axios.post("/message"+url, {
	}).then(function (response) {
		var arr=JSON.parse(JSON.stringify(response.data))['list'];
		var div = document.getElementById("div");
		for(var i in arr)
		{
			if(arr[i].indexOf("link")!=-1)
				continue;
			var linkTmp = document.createElement("a");
			linkTmp.innerText=" "+arr[i];
			linkTmp.href =allUrl;
			var len=linkTmp.href.length;
			if(linkTmp.href[len-1]=='/')
				linkTmp.href+=arr[i];
			else
				linkTmp.href+="/"+arr[i];
			console.log(arr[i]);
			if(window.location.pathname.indexOf("link")==-1&&arr[i].indexOf(".")==-1){
				linkTmp.className="glyphicon glyphicon-folder-open";
			}else{
				linkTmp.className="glyphicon glyphicon-file";
				linkTmp.download=arr[i];
			}
			div.appendChild(linkTmp);
			div.appendChild(document.createElement("br"));
		}
	});
  </script>
  <script>
	function linkFile(){
		window.location.pathname="link";
	}
	function mkdir()
	{
		var sen=document.getElementById("mkdir");
		if(sen.value.length==0)
		{
			alert("please input dir name");
			return;
		}
		var url=window.location.pathname+"/"+sen.value;
		console.log(url);
		axios.post("/mkdir"+url, {
		}).then(function (response) {
			var status=JSON.parse(JSON.stringify(response.data))['status'];
			alert(status);
			location.reload();
			sen.value="";
		});
	}
	function remove()
	{
		var sen=document.getElementById("mkdir");
		if(sen.value.length==0)
		{
			alert("please choose file");
			return;
		}
		var url=window.location.pathname+"/"+sen.value;
		console.log(url);
		axios.post("/delete"+url, {
		}).then(function (response) {
			var status=JSON.parse(JSON.stringify(response.data))['status'];
			alert(status);
			location.reload();
			sen.value="";
		});
	}
	function createLink()
	{
		var sen=document.getElementById("mkdir");
		if(sen.value.length==0)
		{
			alert("please choose file");
			return;
		}
		var url=window.location.pathname+"/"+sen.value;
		console.log(url);
		axios.post("/link"+url, {
		}).then(function (response) {
			var status=window.location.protocol+"//"+window.location.host+JSON.parse(JSON.stringify(response.data))['status']+"\n链接只出现一次,务必保存好";
			alert(status);
			sen.value="";
		});
	}
	function move()
	{
		var sen=document.getElementById("mkdir");
		if(sen.value.length==0)
		{
			alert("please choose file");
			return;
		}
		var url=window.location.pathname+"/"+sen.value;
		var person=prompt("please input the way you move",window.location.pathname+"/");
		if(person!=null&&person!="")
		{
			axios.post("/move"+url, {
				"newpath":person
			}).then(function (response) {
				var status=JSON.parse(JSON.stringify(response.data))['status'];
				alert(status);
				location.reload();
				sen.value="";
			});
		}
	}
	function logout()
	{
		axios.post("/logout", {
		}).then(function (response) {
			location.reload();
		});
	}
	function update()
	{
		location.reload();
	}
	function back()
	{
		window.history.back(-1);
	}
  </script>
</html>
